// 路由守卫
// 1 先导入路由
import router from "./router";
import store from "./store";
// // 进度条的包和样式
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
import getPageTitle from "./utils/get-page-title";

// 定义一个变量接收白名单
const whiteList=['/login','/404']
//  利用前置守卫  检查用户要去哪?
router.beforeEach(async(to,from,next)=>{
    NProgress.start()  //进度条开始
    console.log('页面跳转前一定会经过这里');
    console.log('去哪里',to);
    console.log('从哪里来',from);
    // 动态设置网页的标题
    document.title=getPageTitle(to.meta.title)

    // 判断是否有token
    const token=store.state.user.token   //先定义一个token 接收一下
    if(token){
        // 已经登录
        console.log('你已经登录');
        if(to.path==='/login'){
            console.log('你已经登录了,去别的页面吧');
            next('/')  //让用户去主页
            NProgress.done() //关闭进度条
        }else{
         
            console.log('已经登录状态  用户去其他页面  放行');
               // 发送请求获取个人信息  显示到页面上
            //    优化路由守卫, 判断vuex中,如果有存储用户信息,就不要在发送请求了,没有则发送
            if(!store.state.user.userInfo.userId){   //根据个人信息中的id来判断  是不是已经存了用户信息

                await store.dispatch('user/getUserInfo')
            }
            next()
        }
    }else{  //没有登录
        console.log('你还没有登录,请先登录');
        if(whiteList.includes(to.path)){
            console.log('你拥有白名单,放行');
            next()
        }else{
            console.log('你没有白名单,请先登录');
            next('/login')
            NProgress.done() //关闭进度条
        }
    }

})

// 关闭进度条的还有另外一个情况 就是后置守卫
//  页面跳转完毕  router.afterEach()

router.afterEach(()=>{
    NProgress.done() //页面跳转完毕关闭进度条
})
























// // 导入路由
// import router from "@/router";
// import store from "./store";
// // 进度条的包和样式
//  import NProgress from 'nprogress' // progress bar
//  import 'nprogress/nprogress.css' // progress bar style

// import getPageTitle from "./utils/get-page-title";

// // to:要去哪里
// // from:从哪里来
// /* next:他是一个函数. 
//         如果直接放行 next()
//         如果跳转到其他页面  next(其他页) */
// // 页面在进行跳转之前一定会经过这里

// // 路由守卫

//  // 用数组方法把白名单存进去
// const whitelist=['/login','/404']
// // 前置守卫
// router.beforeEach(async(to,from,next)=>{
//     NProgress.start()
//     console.log('页面在进行跳转之前一定会经过这里');
//     console.log('去哪里',to);
//     console.log('从哪里来',from);

//     // 动态设置网页的标题
//     // document.title=`人力资源系统-${to.meta.title}`
//     document.title=getPageTitle(to.meta.title)

//     // 判断是否有token
//  const token=store.state.user.token

//  if(token){
//     console.log('你已经登录');
//     if(to.path==='/login'){
//         console.log('已经登录,不能重复登录,直接去首页');
//         next('/')
//         NProgress.done()  //关闭进度条
//     }else{
//         console.log('目前是登录状态,访问其他页面  可以放行');
//         // 触发axios函数 获取用户信息 存储到vuex中
//         // store.dispatch(模块名/actions函数名)   //这里是获取信息 不要传数据
       
//         // 判断vuex中是否存储过用户信息, 如果有,就不需要在获取了  这里取反 就需要获取 反则不需要
//        if(!store.state.user.userInfo.userId)   {
//         await store.dispatch('user/getUserInfo') 
//        }
//         next()
//     }
//  }else{
//     console.log('你没有登录');
//     // 用数组方法把白名单存进去  这里调用这个方法
//     if(whitelist.includes(to.path)){
//         console.log('你拥有白名单,可以直接访问,放行');
//         next()
//     }else{
//         console.log('你没有登录不能访问,请先登录');
//         next('/login')
//         NProgress.done() //关闭进度条
//     }
//  }
  
// })

// //  如何开启进度条NProgress.start()   什么时候开启 页面跳转之前
// //  如何关闭进度条NProgress.done()   什么时候关闭 页面加载完毕之前
// // 后置守卫
// router.afterEach(()=>{
//     NProgress.done() //页面跳转完毕 关闭进度条
// })


